Rollup 是一款基于 ES Module 模块规范实现的 JavaScript 打包工具，在前端社区中赫赫有名，同时也在 Vite 的架构体系中发挥着不可小觑的作用，不仅是 Vite 生产环境下的打包工具，其插件机制也被 Vite 所兼容，可以说是 Vite 的构建基石。因此，掌握 Rollup 也是深入学习 Vite 的必经之路。

在接下来的课程中，我们将分两个小节来系统学习 Rollup。本节的内容将围绕 Rollup 的基本概念，带你从 0 开始了解这个打包工具的基本概念和核心特性，手把手教你通过命令行和 API 两种方式使用 Rollup 打包项目。

学完本节后，你不仅能完全入门 Rollup 打包工具的使用，掌握 Rollup 的核心概念及常见配置的含义，并且也能学会 Rollup 更高阶的使用方式，通过 JavaScript API 对 Rollup 进行二次开发。

# 快速上手

首先让我们用npm init -y新建一个项目，然后安装 rollup 依赖:

pnpm i rollup

接着新增 src/index.js 和 src/util.js 和rollup.config.js 三个文件，目录结构如下所示:

.
├── package.json
├── pnpm-lock.yaml
├── rollup.config.js
└── src
    ├── index.js
    └── util.js

文件的内容分别如下:

// src/index.js
import { add } from "./util";
console.log(add(1, 2));

// src/util.js
export const add = (a, b) => a + b;

export const multi = (a, b) => a * b;
// rollup.config.js
// 以下注释是为了能使用 VSCode 的类型提示
/**
 * @type { import('rollup').RollupOptions }
 */
const buildOptions = {
  input: ["src/index.js"],
  output: {
    // 产物输出目录
    dir: "dist/es",
    // 产物格式
    format: "esm",
  },
};

export default buildOptions;

你可以在package.json中加入如下的构建脚本:

{
  // rollup 打包命令，`-c` 表示使用配置文件中的配置
  "build": "rollup -c"
}